Shortcode 簡介

我們知道 Hugo Content 其內容主要是用 Markdown 這類文字標記語法所寫成，內容格式、可用語法較為基礎簡單，若是我們想要套用更多樣化的語法時，只用 Markdown 是做不到的，而且我們不能在 .md 中撰寫如 HTML 的語法，此時就可以透過 Hugo Shortcode 來為我們處理這一塊。

Shortcode V.S. Hugo Template

Shortcode 可以看作是「一小塊 HTML 程式片段」，與 Hugo Template 不同的是，前者通常運用在「插入特定用途」、「重複使用」的片段語法到 markdown 內容中，而後者則是作為 markdown content 的外殼載體、或是佈局規劃等，用以構成我們最後呈現的視圖頁面 (View)。

換句話說，Template 有點像尚未擺放任何拼圖的底框，拼圖畫面則是文章內容，在使用 Shortcode 豐富其畫面的變化。

Shortcode 使用說明

在專案底下新增以下結構資料：

./layouts
└── shortcodes
    └── sandbox.html

shortcodes 資料夾用來放置所有 shortcode，資料夾名稱不可異動，大小寫也須完全相同。而底下的每一支 .html，例如 sandbox.html 都是一支可以被插入到 .md 的 shortcode 原始碼。

舉個例子：嵌入 gif

假設我們想要利用 HTML 語法嵌入外部 gif 圖檔，可新增一支 imgur.html 檔案，內容如下：

# imgur.html
---
title: "Shortcode Test 1"
date: 2020-10-05T20:47:09+08:00
draft: false
---

shortcode 測試

{{< imgur B3lI2gf >}}

<!-- 或是指定變數名稱 {{< imgur code="B3lI2gf" >}} -->

<img src="https://i.imgur.com/{{ .Get 0 }}.gif">

使用 {{ .Get 0 }} 代表取得 {{< shortcode $ >}} 第一個 $ 位置的值，你也可以透過指定變數名稱取代 0：

{{< imgur code="B3lI2gf" >}}

這樣 imgur.html 引入圖檔 src 的部分就可以改成：

<img src="https://i.imgur.com/{{ .Get `code` }}.gif">

效果

重複使用：

...
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}

小結

本篇介紹如何建置一支 shortcode、從 markdown 傳參數給 shortcode 使用，最後引入 markdown 文章內容中呈現，我們只需要懂一些 HTML 的基本用法，就可以擴充更多的選項，豐富網站的內容。

接下來會在分幾個運用場景，多介紹一些筆者自己使用 shortcode 的經驗，並補充一些 Hugo Variables 的說明 (有用到的話)。

參考連結

• Create Your Own Shortcodes
  
• Hugo Shortcode Variables